<template>
    <div>
        <echartsList
            :x_data="x_data"
            ref="myEcharts"
            :seriesList="seriesList"
            :name="name"
        ></echartsList>

        <div class="tableTab tab_box_fiance">
            <span
                class="tableBtn"
                :class="{ on: index == timeIdx }"
                @click="onTime(item, key, index)"
                v-for="(item, key, index) in timeType"
                :key="index"
                v-show="isQuarter != key"
                >{{ item }}</span
            >
        </div>

        <div class="table w1021 flex">
            <div
                class="tableTh tableTr flex wrap w220 right"
                v-if="timeIdx != 2"
            >
                <span class="tableTd">盈利能力</span>
                <span
                    :class="{ active_Row: activeRow == 1 }"
                    @click="handSelect(1, 'roer', 'roer')"
                    class="tableTd top"
                    v-show="timeIdx != 2"
                    >加权净资产收益率(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 2 }"
                    @click="handSelect(2, 'roed', 'roer')"
                    class="tableTd top"
                    >摊薄净资产收益率(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 3 }"
                    @click="handSelect(3, 'roa', 'roaNp')"
                    class="tableTd top"
                    >总资产报酬率(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 4 }"
                    @click="handSelect(4, 'selRint', 'selRint')"
                    class="tableTd top"
                    >销售毛利率(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 5 }"
                    @click="handSelect(5, 'selNint', 'selNint')"
                    class="tableTd top"
                    >销售净利率(%)</span
                >
            </div>

            <div class="tableTr tableBody flex" v-if="timeIdx != 2">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in datalist"
                    :key="index"
                >
                    <span class="tableTd">{{ item.enddate | dateFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 }"
                        @click="handSelect(1, 'roer', 'roer')"
                        class="orange tableTd top"
                        >{{ item.roer | filterVal("numberNo") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'roed', 'roer')"
                        class="orange tableTd top"
                        >{{
                            item.roed || item.roer | filterVal("numberNo")
                        }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'roa', 'roaNp')"
                        class="orange tableTd top"
                        >{{
                            item.roa || item.roaNp | filterVal("numberNo")
                        }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'selRint', 'selRint')"
                        class="orange tableTd top"
                        >{{ item.selRint | filterVal("numberNo") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 5 }"
                        @click="handSelect(5, 'selNint', 'selNint')"
                        class="orange tableTd top"
                        >{{ item.selNint | filterVal("numberNo") }}</span
                    >
                </div>
            </div>

            <!-- <div class="tableTr tableBody flex" v-if="timeIdx == 1">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in tabList[1].list"
                    :key="index"
                >
                    <span class="tableTd">{{ item.enddate | dateFrom }}</span>
                    <span class="orange tableTd top">{{
                        item.roer | filterVal("numberNo")
                    }}</span>
                    <span class="orange tableTd top">{{
                        item.roed || item.roer | filterVal("numberNo")
                    }}</span>
                    <span class="orange tableTd top">{{
                        item.roa || item.roaNp | filterVal("numberNo")
                    }}</span>
                    <span class="orange tableTd top">{{
                        item.selRint | filterVal("numberNo")
                    }}</span>
                    <span class="orange tableTd top">{{
                        item.selNint | filterVal("numberNo")
                    }}</span>
                </div>
            </div> -->
            <div
                class="tableTh tableTr flex wrap w220 right"
                v-if="timeIdx == 2"
            >
                <span class="tableTd">盈利能力</span>
                <span
                    :class="{ active_Row: activeRow == 1 }"
                    @click="handSelect(1, 'roed', 'roer')"
                    class="tableTd top"
                    >摊薄净资产收益率(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 2 }"
                    @click="handSelect(2, 'roa', 'roaNp')"
                    class="tableTd top"
                    >总资产报酬率(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 3 }"
                    @click="handSelect(3, 'selRint', 'selRint')"
                    class="tableTd top"
                    >销售毛利率(%)</span
                >
                <span
                    :class="{ active_Row: activeRow == 4 }"
                    @click="handSelect(4, 'selNint', 'selNint')"
                    class="tableTd top"
                    >销售净利率(%)</span
                >
            </div>
            <div class="tableTr tableBody flex" v-if="timeIdx == 2">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in datalist"
                    :key="index"
                >
                    <span class="tableTd">{{ item.enddate | dateFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 }"
                        @click="handSelect(1, 'roed', 'roer')"
                        class="orange tableTd top"
                        >{{
                            item.roed || item.roer | filterVal("numberNo")
                        }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'roa', 'roaNp')"
                        class="orange tableTd top"
                        >{{
                            item.roa || item.roaNp | filterVal("numberNo")
                        }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'selRint', 'selRint')"
                        class="orange tableTd top"
                        >{{ item.selRint | filterVal("numberNo") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'selNint', 'selNint')"
                        class="orange tableTd top"
                        >{{ item.selNint | filterVal("numberNo") }}</span
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { numberNo, number } from "../../script/api";
import echartsList from "./echartsList";
export default {
    components: {
        echartsList,
    },
    props: {
        tabList: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            name: "",
            activeRow: 1,
            x_data: [],
            seriesList: [],
            datalist: [],
            timeIdx: 0, //时间区间 report-报告期，year-年报，quarter-季度
            timeType: {
                report: "按报告期",
                year: "按年度",
                quarter: "按单季度",
            },
            initData: {
                //配置柱状图数据
                1: {
                    title: "加权净资产收益率(%)",
                },
                2: {
                    title: "摊薄净资产收益率(%)",
                },
                3: {
                    title: "总资产报酬率(%)",
                },
                4: {
                    title: "销售毛利率(%)",
                },
                5: {
                    title: "销售净利率(%)",
                },
            },

            initData_2: {
                //配置柱状图数据

                1: {
                    title: "摊薄净资产收益率(%)",
                },
                2: {
                    title: "总资产报酬率(%)",
                },
                3: {
                    title: "销售毛利率(%)",
                },
                4: {
                    title: "销售净利率(%)",
                },
            },
        };
    },
    computed: {
        ...mapState(["isQuarter"]),
    },
    watch: {
        tabList: {
            handler(val, oldName) {
                this.datalist = val[this.timeIdx].list;
                this.handleXData();
            },
            immediate: true,
            deep: true,
        },
    },
    filters: {
        dateFrom(val) {
            return val.substring(0, 10);
        },
        filterVal(ops, num) {
            if (num == "numberNo") {
                return numberNo(ops, num);
            }
            if (num == "number") {
                return number(ops, num, 1000000);
            }
            if (num == "num") {
                return number(ops, num, 10000);
            }
            if (num == "numb") {
                return number(ops, num, 100);
            }
            if (num == "yiyuan") {
                return number(ops, num, 100000000);
            }
            return ops ? ops : "0.00";
        },
    },
    mounted() {
        if (this.timeIdx == 2) {
            this.name = this.initData_2[this.activeRow]["title"];
        } else {
            this.name = this.initData[this.activeRow]["title"];
        }
    },
    methods: {
        onTime(item, key, index) {
            this.$emit("onTime", key, index);
            this.timeIdx = index;
            this.activeRow = 1;
        },
        handleXData() {
            this.x_data = [];
            this.seriesList = [];
            this.datalist.map((item) => {
                this.x_data.push(item.enddate.substring(0, 10));
                let y_data = 0;
                if (this.timeIdx == 2) {
                    if (item.roed) {
                        y_data = numberNo(item.roed, "numberNo");
                    } else {
                        y_data = numberNo(item.roer, "numberNo");
                    }
                } else {
                    if (item.roer) {
                        y_data = numberNo(item.roer, "numberNo");
                    }
                }

                this.seriesList.push(y_data);
                
            });
        },
        handSelect(selectRow, key, nexKey) {
            this.seriesList = [];
            this.activeRow = selectRow;
            if (this.timeIdx == 2) {
                this.name = this.initData_2[this.activeRow]["title"];
            } else {
                this.name = this.initData[this.activeRow]["title"];
            }

            this.datalist.map((item) => {
                let y_data = 0;
                if (item[key]) {
                    y_data = numberNo(item[key], "numberNo");
                } else {
                    y_data = numberNo(item[nexKey], "numberNo");
                }

                this.seriesList.push(y_data);
            });
        },
    },
};
</script>